<template>
  <div>
    <el-card shadow="never" class="index">
      <template #header>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <!-- 产品管理查询 -->
      <el-form :inline="true" size="small">
        <el-form-item label="产品名称">
          <el-input placeholder="产品名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
          <el-button type="primary" :icon="Plus">发布产品</el-button>
        </el-form-item>
      </el-form>

      <!-- 产品列表 -->
      <el-table :data="tableData" 
    style="width: 100%">
    <el-table-column type="selection" width="55" />
        <el-table-column
          prop="date"
          label="序号"
          width="100"
          empty-text="-"
          show-overflow-tooltip
        />
        <el-table-column
          prop="name"
          label="标题"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="备注"
          width="280"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default>
            <el-button type="text" size="small">查看详情</el-button>
            <el-button link type="primary" size="small">修改</el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- <div class="poolPage">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> -->
    </el-card>
  </div>
</template>
<script setup>
const aaa = ref()
// const tableData =  ref[
//       {
//         date: "1",
//         name: "Tom1",
//         address: "请查看详情并移出融资类型下的产品类型",
//         createTime: "2016-05-03",
//         updateTime: "2016-05-04",
//       },
//       {
//         date: "2",
//         name: "Tom2",
//         address:
//           "请查看详情并移出融资类型下的产品类型融资类型下的产品类型请查看详情并移出融资类型下的产品类型融资类型下的产品类型",
//         createTime: "2016-05-03",
//         updateTime: "2016-05-04",
//       },
//       {
//         date: "3",
//         name: "Tom3",
//         address: "请查看详情并移出融资类型下的产品类型",
//         createTime: "2016-05-03",
//         updateTime: "2016-05-04",
//       },
//       {
//         date: "4",
//         name: "Tom4",
//         address: "请查看详情并移出融资类型下的产品类型",
//         createTime: "2016-05-03",
//         updateTime: "2016-05-04",
//       },
//     ];
    // const handleClick
    // const handleChange
    // const handleSelect
    //       deleteBtn
          
    // const handleSizeChange = (val) => {
    //   params.pageSize = val;
    //   params.page = 1;
    // };
    // const handleCurrentChange = (val) => {
    //   params.page = val;
    // };
</script>

<script>
/**
 * 引入
 */
import { CollectionTag, Plus } from "@element-plus/icons";
import { ArrowRight } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";

export default {
  setup() {
    /**
     * 定义：var
     */

    //   const params = {
    //   page: 1,
    //   pageSize: 10,
    // };

    const tableData = [
      {
        date: "1",
        name: "Tom1",
        address: "请查看详情并移出融资类型下的产品类型",
        createTime: "2016-05-03",
        updateTime: "2016-05-04",
      },
      {
        date: "2",
        name: "Tom2",
        address:
          "请查看详情并移出融资类型下的产品类型融资类型下的产品类型请查看详情并移出融资类型下的产品类型融资类型下的产品类型",
        createTime: "2016-05-03",
        updateTime: "2016-05-04",
      },
      {
        date: "3",
        name: "Tom3",
        address: "请查看详情并移出融资类型下的产品类型",
        createTime: "2016-05-03",
        updateTime: "2016-05-04",
      },
      {
        date: "4",
        name: "Tom4",
        address: "请查看详情并移出融资类型下的产品类型",
        createTime: "2016-05-03",
        updateTime: "2016-05-04",
      },
    ];
    // const handleSizeChange = (val) => {
    //   params.pageSize = val;
    //   params.page = 1;
    // };
    // const handleCurrentChange = (val) => {
    //   params.page = val;
    // };

    /**
     * 方法：method
     */

    // onMounted(() => {
    //   handleSizeChange();
    //   handleCurrentChange();
    // });

    return { tableData,handleCurrentChange };
  },
};
</script>

<style lang="scss" scoped>
.poolPage {
  margin-top: 15px;
  text-align: right;
}
</style>